<template>
	<view>
		<view class="title">
			<image class="img" src="../../static/icon/payment.png"></image>
			<text>我要提现</text>
		</view>
		<view class="box">
			<text>提现方式</text>
			<picker mode=selector @change="bindPickerChange" :value="types.name" :range="types" placehoFlder="请选择提现方式">
				<view>{{types[index]}}</view>
			</picker>
		</view>
		<view v-if="index == 2">
			<view class="box">
				<text>银行卡号</text>
				<input :min="15" :max="30" v-model="drawAccount" placeholder="请填写银行卡号"></input>
			</view>
			<view class="box">
				<text>开户行</text>
				<input v-model="bank" placeholder="请填写银行卡开户行"></input>
			</view>
			<view class="box">
				<text>银行预留手机号</text>
				<input v-model="bankMobile" placeholder="请填写银行预留手机号"></input>
			</view>
			<view class="box">
				<text>开卡人姓名</text>
				<input v-model="bankName" placeholder="请填写开卡人姓名"></input>
			</view>
		</view>
		<view v-else>
			<view class="box">
				<text>提现账号</text>
				<input v-model="drawAccount" placeholder="请填写提现账号"></input>
			</view>
			<view class="box">
				<text>账号名</text>
				<input v-model="bankName" placeholder="请填写提现账号名(支付宝名/微信名)"></input>
			</view>
		</view>
		<view class="box">
			<text>提现金额</text>
			<input v-model="drawAmount" type="number" placeholder="请填写提现金额"></input>
		</view>
		<button type="primary" class="btn" @click="userDisDrow()">提交</button>
	</view>
</template>
<script>
	import {
		get,
		post,
		showToast
	} from '../../js/common';
	export default{
		data(){
			return{
				userId:'',
				drawAmount:'',
				drawAccount:'',
				bank:'',
				bankName:'',
				bankMobile:'',
				bankName:'',
				types:['支付宝','微信','银行卡'],
				index:2
			}
		},
		methods:{
			bindPickerChange(e) {
				this.index = e.detail.value
			},
			userDisDrow(){
					if(this.drawAmount == '' || this.drawAmount == undefined || this.drawAmount == null ){
						uni.showToast({
							title:'提现金额不能为空',
							icon:'none'
						});
						return;
					}
					if(this.drawAccount == '' ){
						uni.showToast({
							title:'请输入提现账号',
							icon:'none'
						});
						return;
					}
				const params = {
						userId: uni.getStorageSync('userId'),
						drawAmount:this.drawAmount,
						drawWay:this.index+1,
						drawAccount:this.drawAccount,
						bankMobile: this.bankMobile,
						bankName: this.bankName,
						openBank: this.bank
					}
					post('mobileapi/pcdis/userDisDrow', params).then(res => {
						if( res.code == 0){
							uni.showToast({
								title:'申请已提交，请等待审核'
							},1000);
							uni.navigateBack(-1)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							});
							return;
						}
					})
			}
		}
	}
</script>
<style>
	page{
		background: #ffffff;
	}
	.title{
		display: flex;
		width: 100%;
		height: 400upx;
		line-height: 400upx;
	}
	.box{
		margin: 0 30upx;
		display: flex;
		border-bottom: 2upx solid #E6E6E6;
		color: #000000;
		font-size: 28upx;
		height: 80upx;
		line-height: 80upx;
		justify-content: space-between;
		align-items: center;
	}
	
	.box input{
		text-align: right;
		flex: 1;
		margin-left: 20upx;
	}
	
	.btn{
		font-size: 28upx;
		margin: 60upx auto;
		background: #D7000F;
		width: 90%;
	}
	.test{
		margin-top: 10upx;
	}
	.img{
		margin: 140upx 20upx 0 220upx;
		width: 120upx;
		height: 120upx;
	}
</style>